<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>定位 : fixed</title>
        <style type="text/css">
            body { margin: 0 ; padding: 0 ; }
            .wrapper { height: 300px ; }
            .odd { background-color: #dedede ; }
            .even { background-color: #fffe8f; }

            
            .tool-bar {
                /* 相对于 浏览器窗口 进行定位 */
                position: fixed ; /* 位置固定 */
                left: 10% ;
                bottom: 0 ; /* 元素底边边缘距离浏览器底边边缘的偏移量 ( 正数向上、负数向下 ) */
                height: 80px ;
                width: 80% ;
                background-color: rgba(238, 16, 0, 0.51);
            }

        </style>
    </head>
    <body>

        <div class="wrapper odd"></div>
        <div class="wrapper even"></div>
        <div class="wrapper odd"></div>
        <div class="wrapper even"></div>
        <div class="wrapper odd"></div>
        <div class="wrapper even"></div>
        <div class="wrapper odd"></div>
        <div class="wrapper even"></div>
        <div class="wrapper odd"></div>
        <div class="wrapper even"></div>
        <div class="wrapper odd"></div>
        <div class="wrapper even"></div>

        <div class="tool-bar"></div>

    </body>
</html>